<template>
    <div class="term-suggestion-panel p-3">
      <h3 class="text-lg font-semibold mb-3 border-b pb-2">医学术语建议</h3>
      
      <div class="search-container mb-3">
        <input 
          type="text" 
          v-model="searchTerm" 
          @input="searchTerms" 
          placeholder="搜索医学术语..."
          class="w-full p-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-300"
        />
      </div>
      
      <div class="terms-list">
        <div 
          v-for="term in filteredTerms" 
          :key="term.code" 
          class="term-item p-2 border-b hover:bg-gray-100 cursor-pointer transition-colors"
          @click="insertTerm(term)"
        >
          <div class="term-name font-medium">{{ term.name }}</div>
          <div class="term-code text-sm text-gray-500">{{ term.code }}</div>
          <div class="term-description text-xs text-gray-600 mt-1">{{ term.description }}</div>
        </div>
      </div>
      
      <div v-if="!filteredTerms.length && searchTerm" class="text-center text-gray-500 mt-5">
        未找到匹配的术语
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, watch, computed } from 'vue';
  import { Transforms, Editor, Text } from 'slate';
  import { useSlate } from 'slate-vue';
  
  // 示例医学术语数据
  const medicalTerms = [
    { code: 'C0002962', name: '高血压', description: '一种以动脉血压持续升高为特征的慢性病' },
    { code: 'C0008297', name: '糖尿病', description: '一组以高血糖为特征的代谢性疾病' },
    { code: 'C0011849', name: '冠心病', description: '由于冠状动脉粥样硬化导致心肌缺血缺氧的心脏病' },
    { code: 'C0020538', name: '脑卒中', description: '突然发生的脑血管破裂或阻塞导致的脑组织损伤' },
    { code: 'C0027051', name: '肺炎', description: '肺部的炎症，通常由感染引起' },
    { code: 'C0036341', name: '胃炎', description: '胃黏膜的炎症' },
    { code: 'C0042769', name: '关节炎', description: '关节的炎症，常见类型有骨关节炎和类风湿关节炎' },
    { code: 'C0042871', name: '偏头痛', description: '一种常见的慢性神经血管性疾病' },
    { code: 'C0043657', name: '抑郁症', description: '以显著而持久的心境低落为主要临床特征' },
    { code: 'C0043766', name: '焦虑症', description: '以焦虑情绪为主要表现的神经症' }
  ];
  
  const editor = useSlate();
  const searchTerm = ref('');
  const filteredTerms = computed(() => {
    if (!searchTerm.value.trim()) return [];
    
    const lowerSearch = searchTerm.value.toLowerCase();
    return medicalTerms.filter(term => 
      term.name.toLowerCase().includes(lowerSearch) ||
      term.description.toLowerCase().includes(lowerSearch)
    );
  });
  
  const searchTerms = () => {
    // 在实际项目中，这里会调用API搜索医学术语
    // 这里使用预设的术语列表
  };
  
  const insertTerm = (term: any) => {
    // 插入术语到编辑器
    Transforms.insertText(editor, term);
    
    // 标记为医学术语
    Transforms.setNodes(
      editor,
      { medicalTerm: true },
      { match: (n) => Editor.isEditor(editor) && Text.isText(n) }
    );
    
    // 清空搜索框
    searchTerm.value = '';
  };
  </script>
  
  <style scoped>
  .term-suggestion-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .terms-list {
    flex: 1;
    overflow-y: auto;
  }
  
  .term-item {
    transition: background-color 0.2s;
  }
  </style>